<template>
  <div>
    <top-banner :titleConfig="titleConfig"></top-banner>
    <maxim></maxim>
    <blog-article :data="data"></blog-article>
    <back></back>
    <turning @back="back()" @next="next()">
      <div slot="center"><span>{{index}}</span>/<span>{{wholePage}}</span></div>
    </turning>
    <footr></footr>
  </div>
</template>
<script>
import { ajax } from "netWork/require";
import getPage from "netWork/getPage"
import myTitle from "components/content/myTitle/MyTitle.vue";
import footr from "components/content/footr/Footr.vue";

import back from "components/common/back/Back.vue";
import blogArticle from "components/common/blogArticle/BlogArticle";
import turning from "components/common/turning/Turning.vue";

import maxim from "./childComponent/Maxim.vue";
import topBanner from '../../components/content/topBanner/TopBanner.vue';



export default {
  name: "index",
  data() {
    return {
      //博文页数
      index: 0,
      //总页数
      wholePage:0,
      //博文信息
      data: [],
      // 标题配置
      titleConfig:{
        but:true,
        contact:true,
        byte:true
      }
    };
  },
  components: {
    myTitle,
    maxim,
    blogArticle,
    back,
    footr,
    turning,
    topBanner
  },
    created() {
    //获取当前页面需要展示的文章数据
    this.getdata();
    //获取页面总页数
    getPage().then(res=>{
      this.wholePage = res.data
    })
    
  },
  methods: {
    getdata() {
      let page =this.index+ 1;
      ajax({
        url: "/getarticle/",
        method: "get",
        params: {
          index:page,
        },
      }).then((res) => {
        console.log(res.data.length)
        if(res.data.length!=0){
          this.data = res.data;
          this.index = page
        }
        
      });
    },
    back(){
      if(this.index==1){
        console.log("已经是第一张咯")
        }
    },
    next(){
      if(this.index!=this.wholePage){
        this.getdata()
      }else{
        console.log("已经是最后了哦")
      }
      
    }
  },
};
</script>
<style scoped>
</style>